<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>

    <div class="address">
        <select name="provice" id="provice">

        </select>
        <select name="city" id="city">

        </select>
        <select name="area" id="area">

        </select>
    </div>

    <script>
        /*
         * 省市区的三级联动
         * 省 -> 城市 -> 区域
         */
        var provices = ['河南省', '北京市', '河北省'];
        var citys = [
            ['郑州市', '开封市', '商丘市', '许昌市'],
            ['北京市'],
            ['石家庄市', '邯郸市']
        ];
        var areas = [
            [
                ['二七区', '金水区', '高新区'],
                ['龙亭区', '顺河回族区', '禹王台区'],
                ['梁园区', '睢阳区', '民权县'],
                ['禹州市', '魏都区', '长葛市'],
            ],
            [
                ['东城区', '西城区', '崇文区', '宣武区', '朝阳区']
            ],
            [
                ['长安区', '桥东区', '桥西区', '新华区', '裕华区', '井陉矿区'],
                ['丛台区', '邯山区', '复兴区', '峰峰矿区', '武安市', '邯郸县']
            ]
        ];

        var provice = document.getElementById('provice');
        var city = document.getElementById('city');
        var area = document.getElementById('area');


        var proviceStr = '';
        // 省份初始化
        for (var i in provices) {
            proviceStr += '<option value="' + i + '">' + provices[i] + '</option>';
        }
        // console.log(proviceStr);
        provice.innerHTML = proviceStr;
        // 加载option后获取省份选中值
        var proviceVal = provice.value;
        // console.log(proviceVal);//0


        // 城市初始化
        var cityStrInit = '';
        for (var i in citys[proviceVal]) {
            cityStrInit += '<option value="' + i + '">' + citys[proviceVal][i] + '</option>';
        }
        city.innerHTML = cityStrInit;
        // 加载option后获取城市市选中值
        var cityVal = city.value;
        // console.log(cityVal);//0

        // 区域初始化
        var areaStrInit = '';
        for (var i in areas[proviceVal][cityVal]) {
            areaStrInit += '<option value="' + i + '">' + areas[proviceVal][cityVal][i] + '</option>';
        }
        area.innerHTML = areaStrInit;

        // 监听省下拉菜单的变化
        provice.onchange = function () {
            proviceVal = provice.value;
            console.log('省索引：' + proviceVal);//省索引：0
            console.log('省内市名称：' + citys[proviceVal]);//省内市名称：郑州市,开封市,商丘市,许昌市
            // 城市重加载
            var cityStr = '';
            for (var i in citys[proviceVal]) {
                cityStr += '<option value="' + i + '">' + citys[proviceVal][i] + '</option>';
            }
            city.innerHTML = cityStr;
            cityVal = city.value;

            // 区域重加载

            // console.log(cityVal);//0
            var areaStr = '';
            // console.log(areas[_provicesVal][_citysVal]);
            for (var j in areas[proviceVal][cityVal]) {
                areaStr += '<option value="' + j + '">' + areas[proviceVal][cityVal][j] + '</option>';
            }
            area.innerHTML = areaStr;
            // console.log(cityVal);//0
        }

        // 监听市下拉菜单的变化
        city.onchange = function () {
            cityVal = city.value;
            console.log('市索引：' + cityVal);//市索引：1
            console.log('市名称：' + citys[proviceVal]);//市名称：郑州市,开封市,商丘市,许昌市
            console.log('市内区名称：' + areas[proviceVal][cityVal]);//市内区名称：龙亭区,顺河回族区,禹王台区
            // citys.innerHTML = '';
            var areaStr = '';
            for (var i in areas[proviceVal][cityVal]) {
                areaStr += '<option value="' + i + '">' + areas[proviceVal][cityVal][i] + '</option>';
            }
            area.innerHTML = areaStr;
        }
    </script>
</body>

</html>